
<template>
    <div class="box-nav">
        <i class="iconfont icon-home"></i>
        <span @click="$router.push('/home')">首页</span>
        <div v-for="(item,index) in title" :key="index">
          <img src="../public/img/rightbiao.png" alt="">
          <span @click="$router.push(item.path)">{{item.title}}</span>
        </div>
    </div>
</template>
<script>
export default {
  props: ["title"],
  data() {
    return {}
  },
  methods: {},
  created() {
  }
};
</script>
<style scoped>
.box-nav {
  width: 100%;
  height: 52px;
  border-bottom: 1px solid #ccc;
  /* padding-left: 32px; */
  color: #999;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 3%
}

.iconfont{
  margin-right: 5px;
}

.box-nav > img:first-child {
  width: 20px;
  margin-right: 10px;
}
.box-nav > span:nth-child(2) {
  font-size: 14px;
  margin-right: 10px;
}
.box-nav > span:nth-child(2):hover {
  cursor: pointer;
  text-decoration: underline;
}
.box-nav > div {
  margin-right: 10px;
}
.box-nav > div > img {
  width: 7px;
  margin-right: 7px;
}
.box-nav > div > span {
  font-size: 14px;
}
.box-nav > div > span:hover {
  cursor: pointer;
  text-decoration: underline;
}
.box-nav > div:last-child > span:hover {
  cursor: default;
  text-decoration: none;
}

</style>